<template>
	<view class="container">
		<view style="padding-bottom: 45px;">
			<view class="topic-time" v-if="resp">{{new Date(resp.updatetime).toLocaleString()}}</view>
			<!-- <view v-html="resp.content"></view> -->
			<view class="p-30" v-html="resp.content"></view>
			<view class="contact-phone p-30">
				{{resp.phone}}
			</view>
			<view class="comment-list">
				<view class="items" v-for="(item,idx) in list" :key="idx">
					<view class="userpl">
						<view class="item-adminid user">
							<view class="userinfo">
								<uni-icons type="star" size="30" color="#999"></uni-icons>{{item.phone}}
							</view>
							<view class="time">
								{{$u.timeFrom(item.createtime*1000, 'yyyy年mm月dd日 hh时MM分')}}
							</view>
						</view>
						<view class="item-adminid comment">{{item.content}}</view>

					</view>
				</view>
			</view>
		</view>
		<view class="comment-box" style="border-bottom: 1px solid #eee;">
			<input v-model="inputContent" class="inner" type="发表评论...">
			<!-- <view class="inner">
				发表评论...
			</view> -->
			<view style="display: flex;align-items: center;">
				<uni-icons type="chatbubble" size="28" color="#999"></uni-icons>
				<view style="font-size: 28rpx;margin-left: 8rpx;color:#999" @click="sendComment">发布评论</view>
				<!-- <text >发布评论</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		answerDetailAPI,
		storyDetailAPI,
		storyPinglunListAPI,
		storyZanCangAPI,
		notstoryZanCangAPI,
		addComment
	} from "@/api/api.js"
	export default {
		data() {
			return {
				form: {
					token: uni.getStorageSync('token') || '',
					id: '',
				},
				resp: null,
				show: false,
				info: {},
				list: [],
				show: false,
				inputContent: "",
				page: 1
			}
		},
		onLoad(opt) {
			this.form.id = opt.id
			this.toPingList()
			this.getTopicDetails()
		},
		methods: {
			//发表评论
			sendComment() {
				const that = this
				addComment({
					gushi_id: this.form.id,
					content: this.inputContent
				}).then(res => {
					console.log('res', res);
					that.toPingList()
					that.inputContent = ''
				})
			},
			//获取故事详情
			getTopicDetails() {
				const that = this
				storyDetailAPI(this.form).then(res => {
					console.log(res, '文章详情');
					that.resp = res.data.data
					uni.setNavigationBarTitle({
						title: that.resp.title || ''
					})
				})
			},
			//评论列表
			toPingList() {
				storyPinglunListAPI({
					gushi_id: this.form.id,
					page: this.page
				}).then(res => {
					if ((res.data.data.rows).length == 0) {
						this.page--
						return
					}
					this.list = res.data.data.rows
				})
			},
		}
	}
</script>

<style lang="scss">
	.topic-time {
		display: block;
		padding-top: 30rpx;
		font-size: 12px;
		color: #6a6a6a;
		text-align: center;
	}

	.contact-phone {
		text-align: right;
	}

	.p-30 {
		padding: 30rpx 30rpx 60rpx 30rpx;
	}

	.comment-box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 90rpx;
		box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, 0.1);
		background: #e5e5e5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;

		.inner {
			width: 70%;
			background-color: #fff;
			height: 60rpx;
			border-radius: 12rpx;
			line-height: 60rpx;
			padding-left: 20rpx;
			// color: gainsboro;
			color: #333;
		}

	}

	.items {
		width: 100%;
		display: flex;
		flex-direction: row;
		line-height: 50rpx;
		margin: 10rpx 0;
		padding: 10rpx 40rpx;
		border-bottom: 2rpx solid gainsboro;

		.userpl {
			width: 100%;
		}

		.user {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10rpx;

			.userinfo {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.comment {
			font-size: 24rpx;
			line-height: 36rpx;
			text-indent: 20rpx;
			word-break: break-all;
		}
	}
</style>